<template>
	<view class="container">
		<!-- 优惠券标签 -->
		<view class="coupon-tabs">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{ active: activeTab === index }"
				@click="setActiveTab(index)"
			>
				<text class="tab-text">{{tab.name}}</text>
				<text class="tab-count" v-if="tab.count > 0">({{tab.count}})</text>
			</view>
		</view>

		<!-- 优惠券列表 -->
		<scroll-view class="coupon-list" scroll-y="true">
			<view class="coupon-item" v-for="(coupon, index) in filteredCoupons" :key="index">
				<view class="coupon-left">
					<view class="coupon-amount">
						<text class="amount-symbol">¥</text>
						<text class="amount-value">{{coupon.amount}}</text>
					</view>
					<view class="coupon-condition">
						<text>满{{coupon.condition}}可用</text>
					</view>
				</view>
				<view class="coupon-right">
					<view class="coupon-info">
						<text class="coupon-name">{{coupon.name}}</text>
						<text class="coupon-desc">{{coupon.description}}</text>
						<text class="coupon-validity">有效期至：{{coupon.validUntil}}</text>
					</view>
					<view class="coupon-status">
						<view class="status-tag" :class="coupon.status">{{getStatusText(coupon.status)}}</view>
						<button 
							class="use-btn" 
							v-if="coupon.status === 'available'"
							@click="useCoupon(coupon)"
						>
							立即使用
						</button>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部说明 -->
		<view class="bottom-tips">
			<text class="tip-text">优惠券使用说明</text>
			<view class="tip-content">
				<text>1. 优惠券仅限指定商品使用</text>
				<text>2. 每笔订单只能使用一张优惠券</text>
				<text>3. 优惠券不可与其他优惠活动同时使用</text>
				<text>4. 优惠券过期后将自动失效</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				tabs: [
					{ name: '可用', count: 3 },
					{ name: '已使用', count: 2 },
					{ name: '已过期', count: 1 }
				],
				coupons: [
					{
						id: 1,
						name: '新人专享券',
						description: '全场通用，无门槛使用',
						amount: '10',
						condition: '0',
						validUntil: '2024-12-31',
						status: 'available'
					},
					{
						id: 2,
						name: '满减优惠券',
						description: '满100减20，限时优惠',
						amount: '20',
						condition: '100',
						validUntil: '2024-11-30',
						status: 'available'
					},
					{
						id: 3,
						name: '品类专享券',
						description: '水果生鲜类商品专用',
						amount: '15',
						condition: '50',
						validUntil: '2024-10-31',
						status: 'available'
					},
					{
						id: 4,
						name: '满减优惠券',
						description: '满200减50，限时优惠',
						amount: '50',
						condition: '200',
						validUntil: '2024-09-30',
						status: 'used'
					},
					{
						id: 5,
						name: '新人专享券',
						description: '全场通用，无门槛使用',
						amount: '5',
						condition: '0',
						validUntil: '2024-08-31',
						status: 'expired'
					}
				]
			}
		},
		computed: {
			filteredCoupons() {
				const statusMap = ['available', 'used', 'expired'];
				return this.coupons.filter(coupon => coupon.status === statusMap[this.activeTab]);
			}
		},
		methods: {
			setActiveTab(index) {
				this.activeTab = index;
			},
			getStatusText(status) {
				const statusMap = {
					'available': '可用',
					'used': '已使用',
					'expired': '已过期'
				};
				return statusMap[status] || '';
			},
			useCoupon(coupon) {
				// 使用优惠券，返回上一页
				uni.$emit('couponSelected', coupon);
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 优惠券标签 */
.coupon-tabs {
	display: flex;
	background-color: #fff;
	padding: 20rpx 0;
	margin-bottom: 20rpx;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	padding: 20rpx 0;
	position: relative;
}

.tab-item.active {
	color: #ff6b35;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background-color: #ff6b35;
	border-radius: 2rpx;
}

.tab-text {
	font-size: 28rpx;
	color: #333;
}

.tab-count {
	font-size: 22rpx;
	color: #999;
}

/* 优惠券列表 */
.coupon-list {
	padding: 0 20rpx;
}

.coupon-item {
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	display: flex;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.coupon-left {
	background: linear-gradient(135deg, #ff6b35, #ff8c42);
	color: white;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 200rpx;
	position: relative;
}

.coupon-left::after {
	content: '';
	position: absolute;
	right: -10rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 20rpx;
	height: 20rpx;
	background-color: #f5f5f5;
	border-radius: 50%;
}

.coupon-amount {
	display: flex;
	align-items: baseline;
	gap: 5rpx;
	margin-bottom: 15rpx;
}

.amount-symbol {
	font-size: 32rpx;
}

.amount-value {
	font-size: 60rpx;
	font-weight: bold;
}

.coupon-condition {
	font-size: 22rpx;
	opacity: 0.9;
}

.coupon-right {
	flex: 1;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.coupon-info {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.coupon-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.coupon-desc {
	font-size: 24rpx;
	color: #666;
}

.coupon-validity {
	font-size: 22rpx;
	color: #999;
}

.coupon-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.status-tag {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 22rpx;
	color: white;
}

.status-tag.available {
	background-color: #52c41a;
}

.status-tag.used {
	background-color: #999;
}

.status-tag.expired {
	background-color: #ff4d4f;
}

.use-btn {
	background-color: #ff6b35;
	color: white;
	border: none;
	padding: 15rpx 30rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

/* 底部说明 */
.bottom-tips {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.tip-text {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.tip-content {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.tip-content text {
	font-size: 24rpx;
	color: #666;
	line-height: 1.5;
}
</style>